<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv1 = document.getElementById('div1');
		var oDiv2 = document.getElementById('div2');

		//alert(oDiv1.classList);			//box1
		//alert(oDiv2.classList);			//box1 box2 box3【只弹一次】
		//alert(oDiv2.classList.length);	//3
		//oDiv2.classList.add('box4');		//在后面添加 => box1 box2 box3 box4【对classList进行操作】
		//oDiv2.classList.remove('box2');	//删除 => box1 box3

		//toggle的功能：如果原先存在则删除，如果不存在则添加
		//oDiv2.classList.toggle('box4');	//在后面添加 => box1 box2 box3 box4
		//oDiv2.classList.toggle('box2');	//删除 => box1 box3
	}
	</script>
</head>
<body>
	<div id="div1" class="box1"></div>
	<div id="div2" class="box1 box2 box3"></div>
</body>
</html>